<template>
  <div>
    <v-header>
      <div class="nav-tab2">店铺简介</div>
      <v-cart :isshow="true"></v-cart>
    </v-header>
    <div class="s-info flex-between gaps">
      <div class="s-info-l flex">
        <img :src="info.headportraiturl|https" alt="">
        <div>
          <p class="ellipsis">{{info.businessname}}</p>
          <p>
            <i class="ico-sp-glb tilt" v-if="info.isglobalpurchase"></i>
            <i :class="info.icoClass" class="tilt"></i>
          </p>
        </div>
      </div>
      <div class="s-info-r">
        <p class="font-price">{{info.favorcount>999?'999+':info.favorcount}}
          <span>粉丝</span>
        </p>
      </div>
    </div>

    <section class="s-subinfo">
      <div class="flex-aic gaps" v-if="info.companycertificate" @click="goLicense">
        <span>工商执照</span>
        <i class="ico-shop-cert"></i>
      </div>
      <div class="flex-aic gaps" v-else>
        <span>已实名认证</span>
        <i class="ico-shop-named"></i>
      </div>

      <div class="gaps" v-if="info.desc">
        <p>ABOUT US</p>
        <p>{{info.desc}}</p>
      </div>
    </section>

    <swiper :options="swiperOption" class="swiper-container sp-swiper" v-if="albums&&albums.length">
      <swiper-slide v-for="(item,idx) in albums" :key='idx'>
        <img :src="item|https" alt="">
      </swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar" v-if="albums&&albums.length>1"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: {},
      albums: [],
      swiperOption: {
        // spaceBetween: 15,
        slidesPerView: 1.33,
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: false
      }
    }
  },
  beforeMount() {
    let _ = this
    let id = _.$route.params.id
    let info = JSON.parse(window.localStorage.getItem('SHOP_INFO') || '{}')
    console.log('===shop info', info)
    if (info.id && id && info.id === id) {
      if (info.albums) _.albums = info.albums.split('|')
      _.info = info
    } else _.$router.replace('/shop/shopdetail/' + id || info.id || '')
  },
  methods: {
    goLicense() {
      let url = this.info.companycertificate
      this.$router.push('/shop/license/' + encodeURIComponent(url))
    }
  }
}
</script>
<style scoped>
.s-info {
  width: 100%;
  padding: 10px;
}
.s-info-l {
  max-width: 72%;
}
.s-info-l > img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 5px;
}
.s-info-l .ellipsis {
  max-width: 170px;
}
.s-info-r {
  width: 70px;
  text-align: right;
  font-size: 12px;
}
.s-info-r > p {
  line-height: 16px;
  font-size: 13px;
}
.s-info-r > p span {
  font-size: 10px;
}
.s-subinfo {
  font-size: 12px;
}
.s-subinfo > div {
  padding: 10px;
}
.s-subinfo i {
  margin-left: 10px;
}
.s-subinfo p:first-of-type {
  margin-bottom: 8px;
  font-weight: 600;
}
.s-subinfo p:last-of-type {
  color: #666;
  line-height: 16px;
}
.sp-swiper {
  padding: 40px 15px;
  padding-right: 0;
}
.swiper-slide {
  padding-right: 15px;
}
.swiper-slide img {
  border-radius: 14px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
</style>
